<!--
 * @Author: zi.yang
 * @Date: 2021-04-12 07:38:00
 * @LastEditors: zi.yang
 * @LastEditTime: 2021-04-29 14:38:14
 * @Description: In User Settings Edit
 * @FilePath: \take-out-food\src\components\header\index.vue
-->
<template>
  <div class="header">
    <div class="content-wrapper">
      <div class="avatar">
        <img :src="getAvatar" alt="头像" width="64" height="64" />
      </div>
      <div class="content">
        <div class="title">
          <span class="brand"></span>
          <span class="name">{{ seller.name }}</span>
        </div>
        <div class="description">
          {{ seller.description }}/{{ seller.deliveryTime }}分钟送达
        </div>
        <div v-if="seller.supports" class="support">
          <span class="icon" :class="classMap[seller.supports[0].type]"></span>
          <span class="text"> {{ seller.supports[0].description }} </span>
        </div>
      </div>
      <div
        v-if="seller.supports"
        class="support-count"
        @click="handleShowDetail"
      >
        <span class="count">{{ seller.supports.length }}个</span>
        <i class="icon-keyboard_arrow_right"></i>
      </div>
    </div>
    <div class="bulletin-wrapper" @click="handleShowDetail">
      <span class="bulletin-title"></span>
      <span class="bulletin-text">{{ seller.bulletin }}</span>
      <i class="icon-keyboard_arrow_right"></i>
    </div>
    <div class="background">
      <img :src="getAvatar" alt="" width="100%" height="100%" />
    </div>
    <transition>
      <header-floating
        @handleShowDetail="handleShowDetail"
        v-show="detailShow"
        :seller="seller"
        :classMap="classMap"
      ></header-floating>
    </transition>
  </div>
</template>

<script>
import HeaderFloating from './Floating';
export default {
  name: 'HomeHeader',
  props: {
    seller: Object,
  },
  components: {
    HeaderFloating,
  },
  data() {
    return {
      detailShow: false,
      classMap: ['decrease', 'discount', 'special', 'invoice', 'guarantee'],
    };
  },
  methods: {
    handleShowDetail() {
      this.detailShow = !this.detailShow;
    },
  },
  computed: {
    getAvatar() {
      return require('@images/logo.png');
    },
  },
};
</script>

<style lang="stylus" scoped>
@import "~@styles/mixin.styl"
.header
  position relative
  color #fff
  background rgba(7,17,27,.5)
  .content-wrapper
    padding:24px 12px 18px 24px
    font-size 0
    position relative
    .avatar
      width 64px
      height 64px
      background #fff
      display inline-block
      vertical-align top
      border-radius 2px
    .content
      display inline-block
      margin-left 16px
      font-size 14px
      .title
        margin 2px 0 8px 0
        .brand
          display inline-block
          // 垂直对齐
          vertical-align top
          width 30px
          height 18px
          bg-image('~@images/header/brand')
          background-size 30px 18px
          background-repeat no-repeat
        .name
          margin-left 6px
          font-size 16px
          line-height 18px
          font-weight bold
      .description
        margin-bottom 10px
        line-height 12px
        font-size 13px
      .support
        font-size 12px
        .icon
          display inline-block
          vertical-align top
          margin 0 !important
          width 12px
          height 12px
          margin-right 4px
          background-size 12px 12px
          background-repeat no-repeat
          // 较小的图片打包时，会直接打包成base64
          &.decrease
            bg-image('~@images/header/decrease_1')
          &.discount
            bg-image('~@images/header/discount_1')
          &.guarantee
            bg-image('~@images/header/guarantee_1')
          &.invoice
            bg-image('~@images/header/invoice_1')
          &.special
            bg-image('~@images/header/special_1')
        .text
          line-height 12px
          font-size 11px
    .support-count
      position absolute
      right 12px
      bottom 14px
      padding 0 8px
      height 24px
      line-height 14px
      border-radius 14px
      background rgba(0,0,0,.2)
      text-align center
      .count
        vertical-alian middle
        line-height 24px
        font-size 11px
      .icon-keyboard_arrow_right
        vertical-alian middle
        margin-left 2px
        line-height 24px
        font-size 11px
  .bulletin-wrapper
    position relative
    height 28px
    line-height 28px
    padding 0 22px 0 12px
    white-space nowrap
    overflow hidden
    text-overflow ellipsis
    background rgba(7,17,27,.2)
    .bulletin-title
      vertical-align middle
      display inline-block
      width 22px
      height 12px
      bg-image('~@images/header/bulletin')
      background-size 22px 12px
      background-reapet no-repeat
    .bulletin-text
      vertical-align middle
      margin 0 4px
      font-size 11px
    .icon-keyboard_arrow_right
      position absolute
      font-size 12px
      right 12px
      top 8px
  .background
    position absolute
    top 0
    left 0
    width 100%
    height 100%
    z-index -1
    // 滤镜
    filter blur(10px)

.v-enter,.v-leave-to
  height 0
  opacity 0
.v-enter-to,.v-leave
  height 100%
  opacity 1
.v-enter-active,.v-leave-active
  transition all .5s
</style>
